<template lang='pug'>
  .page
    .search-form.mb-15.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}") 
          span.label-txt.w100 收费方案类型：   
          Select(v-model="searchData.Category"  placeholder="请选择收费类型" label-in-value clearable @on-change="categoryChange")
            Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 10 }" :xxl="{span: 8}")
          span.label-txt.w100 收费方案名称：
          Input(v-model="searchData.Name" placeholder="请输入" clearable)
          Button.ml-15(v-if="hasFind" type="info" @click="searchFn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="listData" :loading="loading" :stripe="true")
        ._table_header(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
              | 条
          .pull-right.table-title-btns
            i-button.mr-10(v-if="hasAdd" type="info" @click="openCreateModal") 新增方案
        template(slot-scope="{ row, index }" slot="action")
          Button(v-if="hasFind" type="text" size="small" @click="openHasBindModal(row.id,row.category)") 已绑定客户
          Button.ml-15(v-if="hasBind" type="text" size="small" @click="openBindModal(row.id,row.category)") 绑定客户
          Button.ml-15(v-if="hasCheck" type="text" size="small" @click="checkDetail(row.category, row.id)") 查看
          Button.ml-15(v-if="hasDel" type="text" size="small" @click="deleteBtn(row.category, row.id)") 删除
        ._table_footer(slot="footer")
          Page(class="_page" :total="totalRows" :current="searchData.PageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" @on-page-size-change="onpageSizeChange" show-sizer show-total :page-size-opts="[10, 20, 30, 50, 100]")
    create-modal(ref="createModal" 
      :show="createModalShow" 
      @get-list="getList();createModalShow = false"
      @on-cancel="createModalShow = false"
    )
    dt-insure(
      ref="dtInsureModal"
      :category="dtCategory"
      :chargingTypeArr="chargingTypeArr"
      :show="dtInsureShow"
      :detailInfo="detailInfo"
      @on-cancel="dtInsureShow = false"
      @get-list="getList();dtInsureShow = false"
    )
    dt-fuwufei(
      ref="dtFwModal"
      :category="dtCategory"
      :chargingTypeArr="chargingTypeArr"
      :show="dtFwShow"
      :detailInfo="detailInfo"
      @on-cancel="dtFwShow = false"
      @get-list="getList();dtFwShow = false"
    )
    dt-shuifei(
      ref="dtSfModal"
      :category="dtCategory"
      :chargingTypeArr="chargingTypeArr"
      :show="dtSfShow"
      :detailInfo="detailInfo"
      @on-cancel="dtSfShow = false"
      @get-list="getList();dtSfShow = false"
    )
    bind-modal(ref="bindModal" :id="planId" :category="bindCategory")
    has-bind-modal(ref="hasBindModal" :id="planId" :category="bindCategory")
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
import dataApi from '@/api/data.js'
// import createModal from './modal/create.vue'
import createModal from './create/index.vue'

import dtInsure from './detail/insure.vue'
import dtFuwufei from './detail/fuwufei.vue'
import dtShuifei from './detail/shuifei.vue'

import bindModal from './modal/bind.vue'
import hasBindModal from './modal/hasBind.vue'


export default {
  name:'charging-scheme',
  props:{},
  data () {
    return {
      planId: '', // 方案id
      createModalShow: false,
      chargingTypeArr: [
        {key: 1, value: '社保方案'},
        {key: 2, value: '公积金方案'},
        {key: 4, value: '商保方案'},
        {key: 8, value: '薪资方案'},
        {key: 16, value: '服务费方案'},
        {key: 32, value: '税费方案'},
      ],
      thead: [
        {
          title: '收费方案类型',
          minWidth: 190,
          align: 'center',
          key: 'categoryName'
        },
        {
          title: '收费方案名称',
          minWidth: 190,
          align: 'center',
          key: 'name'
        },
        {
          title: '操作',
          minWidth: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      listData: [],
      loading: false,
      totalRows: 0,
      notVerifiedCount: 0,
      verifiedCount: 0,
      searchData: {
        Category: '', // 收费类型方案
        Name: '',
        PageIndex: 1,
        PageSize: 10
      },

      // 详情
      type_1: [1, 2, 4, 8],
      type_2: [16],
      type_3: [32],
      dtInsureShow: false,
      dtFwShow: false,
      dtSfShow: false,
      dtCategory: 0,
      detailInfo: {},
      bindCategory: 0,

    }
  },

  components: {
    createModal,
    dtInsure,
    dtFuwufei,
    dtShuifei,
    bindModal,
    hasBindModal,
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      console.log(arr)
      return arr
    },
    // 新增方案
    hasAdd () {
      return this.actionArr.indexOf('PostInsureProject') > -1
    },
    // 绑定客户
    hasBind () {
      return this.actionArr.indexOf('Bind') > -1
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasCheck () {
      return this.actionArr.indexOf('SingleProject') > -1
    },
    // 删除
    hasDel () {
      return this.actionArr.indexOf('Delete') > -1
    },
  },

  beforeMount() {},

  mounted() {
    // this.getEnum()
    this.getList()
  },

  methods: {
    categoryChange (val) {
      // console.log(val)
      // if (val) {
      //   this.searchData.Name = val.label
      // } else {
      //   this.searchData.Name = ''
      // }
    },
    searchFn () {
      this.searchData.PageIndex = 1
      this.getList()
    },
    getList () {
      this.loading = true
      InsureProjectApi.SearchProjects(this.searchData).then(res => {
        console.log(res)
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.totalRows = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    openCreateModal () {
      // this.createModalShow = true
      this.$refs.createModal.openModal()
    },
    openBindModal (id, category) {
      this.planId = id
      this.bindCategory = category
      this.$refs.bindModal.show()
    },
    openHasBindModal (id, category) {
      this.planId = id
      this.bindCategory = category
      this.$refs.hasBindModal.show()
    },
    checkDetail (category, id) {
      this.dtCategory = category
      InsureProjectApi.SingleProject({
        category,id
      }).then(res => {
        console.log(res)
        this.detailInfo = res.data.data
        if (res.data.data.quarterStart > 0) {
          this.detailInfo.isQuarterStart = true
        } else {
          this.detailInfo.isQuarterStart = false
        }
      })
      if (this.type_1.includes(category)) {
        // this.dtInsureShow = true
        this.$refs.dtInsureModal.openModal()
      } 
      if (this.type_2.includes(category)) {
        // this.dtFwShow = true
        this.$refs.dtFwModal.openModal()
      }
      if (this.type_3.includes(category)) {
        // this.dtSfShow = true
        this.$refs.dtSfModal.openModal()
      }
    },
    deleteBtn (category, id) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>删除后不可撤销！</p>',
        loading: true,
        onOk: () => {
          InsureProjectApi.DeleteProject({
            category: category,
            projectId: id
          }).then(res => {
            this.$Modal.remove()
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.getList()
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    },
    /**
     * 分页
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.searchData.PageIndex = val
      this.getList()
    },
    /**
     * 分页页码变动
     */
    onpageSizeChange (val) {
      this.searchData.PageIndex = 1
      this.searchData.PageSize = val
      this.getList()
    },
    /**
     * 数据字典
     */
    getEnum () {
      let groupNames = 'customer.status'
      dataApi.getEnum({
        groupName: groupNames
      }).then((res) => {
        this.cooperateStatus_arr = this.getItems(res.data, 'customer.status')
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    }
  },

  watch: {}

}

</script>
<style lang='less'>
  @import "./index.less";

</style>